<template>
  <div class="app-container">
    <!-- 表格查询 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="商品编码" prop="itemCode">
        <el-input v-model="queryParams.itemCode" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品名称" prop="itemName">
        <el-input v-model="queryParams.itemName" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="规格信息" prop="specification">
        <el-input v-model="queryParams.specification" placeholder="请输入规格信息" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="平台商品名称" prop="platformProductName">
        <el-input v-model="queryParams.platformProductName" placeholder="请输入平台商品名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="平台商品代码" prop="platformProductCode">
        <el-input v-model="queryParams.platformProductCode" placeholder="请输入平台商品代码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="平台类型" prop="platformId">
        <el-select v-model="queryParams.platformId" placeholder="请选择平台类型" clearable>
          <el-option v-for="item in platformTypeOptions" :key="item.id" :label="item.platformName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="平台规格信息" prop="platformSpecInfo">
        <el-input v-model="queryParams.platformSpecInfo" placeholder="请输入平台规格信息" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表头操作 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <vxe-table border stripe v-loading="loading" ref="tableRef" size="small" header-align="center"
      :row-config="rowConfig" :column-config="columnConfig" @checkbox-change="checkboxChangeEvent"
      @checkbox-all="checkboxAll" @cell-click="cellClickEvent" :data="tableDataList">
      <vxe-column type="seq" width="60" align="center" title="序号" />
      <vxe-column field="itemCodes" show-overflow="title" align="center" title="商品编码" />
      <vxe-column field="itemNames" show-overflow="title" align="center" title="商品名称" />
      <vxe-column field="specifications" show-overflow="title" align="center" title="规格信息" />
      <vxe-column field="imageUrl" show-overflow="title" align="center" title="图片">
        <template #default="{ row }">
          <img v-if="row.imageUrl" :src="row.imageUrl" alt="图片"
            style="height: 32px; max-width: 60px; object-fit: contain" />
        </template>
      </vxe-column>
      <vxe-column field="platformInfo" show-overflow="title" align="center" title="平台商品信息">
        <template #default="{ row }">
          <el-button type="text" style="color: #ff5500" @click="handleViewPlatform(row)">查看</el-button>
        </template>
      </vxe-column>
      <vxe-column field="createTime" show-overflow="title" align="center" title="创建时间" />
      <vxe-column width="100" align="center" title="操作" fixed="right">
        <template #default="{ row }">
          <el-button size="mini" type="text" @click="handleUpdate(row)">修改</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 平台商品信息弹窗 -->
    <el-dialog :title="'平台商品信息'" :visible.sync="platformDialogVisible" width="800px" append-to-body>
      <vxe-table :data="platformDialogList" border size="small" header-align="center">
        <vxe-column type="seq" width="60" align="center" title="序号" />
        <vxe-column field="platformProductCode" show-overflow="title" align="center" title="平台商品编码" />
        <vxe-column field="platformProductName" show-overflow="title" align="center" title="平台商品名称" />
        <vxe-column field="platformProductInfo" show-overflow="title" align="center" title="平台规格信息" />
        <vxe-column field="platformName" show-overflow="title" align="center" title="平台类型" />
        <vxe-column field="shopName" show-overflow="title" align="center" title="店铺名称" />
      </vxe-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="platformDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增弹窗 -->
    <add-product v-if="open" :visible.sync="open" :title="dialogMode === 'edit' ? '修改' : '新增'" :editData="editData"
      :mode="dialogMode" @ok="handleOk" @cancel="handleCancel" />
  </div>
</template>

<script>
import AddProduct from "./components/addProduct.vue";
import {
  getProductMappingList,
  // deleteProductMapping,
  // addProductMapping,
  // updateProductMapping,
  // getProductMappingDetail
} from "@/api/mes/sales/productMapping";
import { listPlatforms } from "@/api/mes/sales/platform";

export default {
  name: "ProductMapping",
  components: {
    AddProduct,
  },
  data() {
    return {
      title: "",
      open: false,
      loading: false,
      total: 0,
      form: {},
      rules: {
        clientCode: [
          { required: true, message: "请输入会员代码", trigger: "blur" },
        ],
        clientName: [
          { required: true, message: "请输入会员名称", trigger: "blur" },
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      platformTypeOptions: [],
      platformDialogVisible: false,
      platformDialogList: [],
      tableDataList: [],
      columnConfig: {
        drag: true,
        resizable: true,
        storage: true,
        sortConfig: {
          trigger: "cell",
          remote: true,
        },
        align: "center",
        headerAlign: "center",
      },
      rowConfig: {
        drag: true,
        keyField: "clientId",
        isHover: true,
        isCurrent: true,
      },
      ids: [], //选中的条目
      dialogMode: "", // add | edit
      editData: null,
    };
  },
  created() {
    this.getList();
    this.getPlatformTypeOptions();
  },
  methods: {
    getPlatformTypeOptions() {
      listPlatforms().then((response) => {
        this.platformTypeOptions = response.rows;
      });
    },
    handleViewPlatform(row) {
      this.platformDialogList = Array.isArray(row.platformMappings)
        ? row.platformMappings
        : [];
      this.platformDialogVisible = true;
    },
    getList() {
      this.loading = true;
      getProductMappingList(this.queryParams)
        .then((response) => {
          this.tableDataList = response.rows;
          this.$nextTick(() => {
            this.$refs.tableRef.setCurrentRow(this.tableDataList[0]);
          });
          if (response.rows?.length > 0) {
            this.cellId = response.rows[0].clientId;
          }
          this.total = response.total;
          console.log(response);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleAdd() {
      this.dialogMode = "add";
      this.editData = null;
      this.open = true;
    },
    handleUpdate(row) {
      this.dialogMode = "edit";
      this.editData = { ...row };
      this.open = true;
    },
    handleOk() {
      // 新增/编辑成功后刷新列表
      this.open = false;
      this.getList();
    },
    handleCancel() {
      this.open = false;
    },
    // handleDelete(row){
    //   if(this.ids.length==0){
    //     this.$modal.msgError("请选择要删除的数据");
    //     return;
    //   }
    //   const ids = this.ids;
    //   this.$modal.confirm('是否确认删除该数据项？').then(function() {
    //     return deleteProductMapping(ids);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("删除成功");
    //   }).catch(() => {});
    // },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }),
        this.getList();
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            // distributor: this.form.distributor ? 'Y' : 'N',
            // enableFlag: this.form.enableFlag ? 'Y' : 'N',
            // blackFlag: this.form.blackFlag ? 'Y' : 'N',
          };
          if (this.form.clientId) {
            editMemberBasic(params).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMemberBasic(params).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.$refs["form"].resetFields();
      this.open = false;
    },
    cellClickEvent({ row }) {
      this.cellId = row.clientId;
      this.handleClick({ name: "1" });
    },
    checkboxChangeEvent(checked) {
      this.ids = checked.records.map((item) => item.clientId);
    },
    checkboxAll(checked) {
      this.ids = checked.records.map((item) => item.clientId);
    },
    handleClick(tab, event) {
      switch (tab.name) {
        case "1":
          // console.log('基础信息');
          break;
        case "2":
          console.log("2");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>